<div class="container cm-page-user" phx-hook="UserPage" cm-title="<%= @user.username %> (<%= @user.nickname %>)">
  <div class="section">
    <div class="card">
      <div class="card-header">
        <p class="card-header-title">
          <%= @user.username %> (<%= @user.nickname %>)
        </p>
      </div>
      <div class="card-content">
        <div class="columns">
          <div class="column is-narrow">
            <img class="cm-page-user-face" src="/images/face/<%= @user.face %>">
          </div>
          <div class="column is-narrow cm-page-user-info">
            <div class="cm-page-user-info-name">
              <p class="subtitle is-4"><%= @user.nickname %></p>
            </div>
            <div class="cm-page-user-info-items">
              <div class="cm-page-user-info-business">
                <span>
                  <i class="fas fa-briefcase fa-fw"></i>
                </span>
                <span><%= @user.industry %></span>
                <span class="divide">•</span>
                <span><%= @user.company %></span>
                <span class="divide">•</span>
                <span><%= @user.position %></span>
              </div>
              <div class="cm-page-user-info-location">
                <span>
                  <i class="fas fa-map-marker-alt fa-fw"></i>
                </span>
                <span><%= @user.location %></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="card">
      <div class="card-content">
        <div class="tabs is-boxed">
          <ul>
            <li <%= if @happened == :activities, do: "class=is-active" %>>
              <%= live_link to: Routes.live_path(@socket, CommunityWeb.UserLive, @id, "activities") do %>
                <span>最近的动态</span>
              <% end %>
            <li <%= if @happened == :topics, do: "class=is-active" %>>
              <%= live_link to: Routes.live_path(@socket, CommunityWeb.UserLive, @id, "topics") do %>
                <span>发表的主题</span>
              <% end %>
            </li>
            <li <%= if @happened == :qualities, do: "class=is-active" %>>
              <%= live_link to: Routes.live_path(@socket, CommunityWeb.UserLive, @id, "qualities") do %>
                <span>精华帖</span>
              <% end %>
            </li>
          </ul>
        </div>
        <div>
          <div class="content cm-page-user-created">
            <%= for activity <- @activities do %>
              <% {action_name, has_content?} = case activity.type do
                      :reply -> {"回复了主题", true}
                      :topic -> {"发表了主题", true}
                      :vote -> {"点赞了主题", false}
                      :star -> {"收藏了主题", false}
                     end%>
              <div>
                <div class="cm-page-user-created-header is-clearfix">
                  <span class="is-pulled-left cm-page-user-created-header-action"><%= action_name %></span>
                  <span class="is-pulled-right cm-page-user-created-header-date"><%= activity.date %> 天前</span>
                </div>
                <p class="cm-page-user-created-title">
                  <%= live_link activity.title, 
                      to: Routes.live_path(@socket, CommunityWeb.ArticleLive, activity.article_id)
                  %>
                </p>
                <%= if has_content? do %>
                  <div class="cm-page-user-created-content"><%= activity.content %></div>
                <% end %>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
